<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">注册新用户</div>

                    <div class="panel-body">
                        <form class="form-horizontal" method="POST" @submit.prevent="register">
                            <div class="form-group">
                                <label for="name" class="col-md-4 control-label">用户名</label>

                                <div class="col-md-6">
                                    <input v-model="name"
                                           v-validate data-vv-rules="required|min:4" data-vv-as="用户名"
                                           id="name" type="text" class="form-control" name="name"  required autofocus>
                                    <span class="help-block" v-show="errors.has('name')">{{errors.first('name')}}</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="email" class="col-md-4 control-label">邮箱</label>
                                    <input v-model="email"
                                           v-validate data-vv-rules="required|email" data-vv-as="邮箱"
                                           id="email" type="email" class="form-control" name="email" value="" required>
                                    <span class="help-block" v-show="errors.has('email')">{{errors.first('email')}}</span>
                            
                            </div>

                            <div class="form-group">
                                <label for="password" class="col-md-4 control-label">密码</label>

                       
                                    <input v-model="password"
                                           v-validate  data-vv-rules="required|min:8" data-vv-as="密码"  ref="password"
                                           id="password" type="password" class="form-control" name="password" required>
                                    <span class="help-block" v-show="errors.has('password')">{{errors.first('password')}}</span>

                         
                            </div>

                            <div class="form-group">
                                <label for="password-confirm" class="col-md-4 control-label">确认密码</label>


                                    <input id="password-confirm"
                                           v-validate data-vv-rules="required|min:8|confirmed:password" data-vv-as="确认密码"
                                           type="password" class="form-control" name="password_confirmation" required>
                                    <span class="help-block" v-show="errors.has('password_confirmation')">{{errors.first('password_confirmation')}}</span>
           
                            </div>

                            <div class="form-group">
                                <div class="col-md-6 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary">
                                        注册
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RegisterForm",
        data(){
            return{
                name:'',
                email:'',password:''
            }
        },
        methods:{
            register(){
                let formData={
                    name:this.name,
                    email:this.email,
                    password:this.password,
                }
                axios.post('/api/register',formData).then(response=>{
                    // this.$route
               console.log(response.data)
                    if(response.data.status==true){
                        this.$router.push({
                            name:'confirm',
                            params:{
                                email:formData.email
                            }
                        })
                    }


                })

            }
        }
    }
</script>

<style scoped>

</style>